<template>
  <div class="shared-files">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-text">
          <h1 class="page-title">
            <el-icon class="title-icon">
              <Share />
            </el-icon>
            共享文件
          </h1>
          <p class="page-description">查看所有与您共享的文件和文件夹</p>
        </div>
        <div class="header-stats">
          <div class="stat-card">
            <div class="stat-number">{{ total }}</div>
            <div class="stat-label">共享项目</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar-container">
      <div class="toolbar">
        <div class="toolbar-left">
          <div class="search-filter-section">
            <!-- 搜索框 -->
            <div class="search-box">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索文件名..."
                clearable
                @input="handleSearch"
                @clear="handleSearch"
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
            
            <!-- 筛选器 -->
            <div class="filters">
              <el-select 
                v-model="shareLevel" 
                placeholder="选择共享级别" 
                clearable 
                @change="loadSharedFiles"
                class="filter-select"
              >
                <el-option label="全部级别" value="" />
                <el-option label="部门共享" value="department" />
                <el-option label="公开共享" value="public" />
              </el-select>
              
              <el-select 
                v-model="fileType" 
                placeholder="文件类型" 
                clearable 
                @change="loadSharedFiles"
                class="filter-select"
              >
                <el-option label="全部类型" value="" />
                <el-option label="文件夹" value="folder" />
                <el-option label="文件" value="file" />
              </el-select>
            </div>
          </div>
        </div>
        
        <div class="toolbar-right">
          <el-button 
            @click="loadSharedFiles" 
            :loading="loading"
            class="refresh-btn"
          >
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
    </div>

    <!-- 文件列表 -->
    <div class="file-list-container">
      <div class="file-table-wrapper">
        <el-table 
          :data="sharedFiles" 
          v-loading="loading"
          @row-click="handleRowClick"
          @row-contextmenu="handleRowRightClick"
          class="shared-files-table"
          height="100%"
          empty-text="暂无共享文件"
        >
          <el-table-column prop="name" label="名称" min-width="250">
            <template #default="{ row }">
              <div class="file-item">
                <div class="file-icon-wrapper">
                  <el-icon :class="getFileIconClass(row)">
                    <component :is="getFileIcon(row)" />
                  </el-icon>
                </div>
                <div class="file-info">
                  <div class="file-name">{{ row.name }}</div>
                  <div class="file-description-inline" v-if="row.description">
                    {{ row.description }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="share_level" label="共享级别" width="130">
            <template #default="{ row }">
              <el-tag 
                :type="getShareLevelType(row.share_level)"
                size="small"
                class="share-level-tag"
              >
                <el-icon class="tag-icon">
                  <component :is="getShareIcon(row.share_level)" />
                </el-icon>
                {{ getShareLevelText(row.share_level) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="owner_name" label="所有者" width="140">
            <template #default="{ row }">
              <div class="owner-info">
                <el-icon class="owner-icon">
                  <User />
                </el-icon>
                <span>{{ row.owner_name || '未知' }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="size" label="大小" width="120">
            <template #default="{ row }">
              <span :class="row.is_folder ? 'file-size-empty' : 'file-size'">
                {{ row.is_folder ? '-' : formatFileSize(row.size) }}
              </span>
            </template>
          </el-table-column>
          
          <el-table-column prop="updated_at" label="修改时间" width="180">
            <template #default="{ row }">
              <div class="file-date">
                <el-icon class="date-icon">
                  <Clock />
                </el-icon>
                {{ formatDate(row.updated_at) }}
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons-cell">
                <el-tooltip content="下载文件" v-if="!row.is_folder">
                  <el-button 
                    type="primary" 
                    size="small" 
                    @click.stop="downloadFile(row)"
                    class="action-btn-small"
                  >
                    <el-icon><Download /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="打开文件夹" v-if="row.is_folder">
                  <el-button 
                    type="success" 
                    size="small" 
                    @click.stop="openFolder(row)"
                    class="action-btn-small"
                  >
                    <el-icon><FolderOpened /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container" v-if="total > 0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="loadSharedFiles"
        @current-change="loadSharedFiles"
        background
      />
    </div>

    <!-- 右键菜单 -->
    <div 
      v-show="contextMenuVisible" 
      class="context-menu"
      :style="{ left: contextMenuPosition.x + 'px', top: contextMenuPosition.y + 'px' }"
      @click.stop
    >
      <div 
        v-if="!contextMenuFile?.is_folder" 
        class="context-menu-item" 
        @click="handleContextMenuAction(() => downloadFile(contextMenuFile))"
      >
        <el-icon><Download /></el-icon>
        <span>下载文件</span>
      </div>
      <div 
        v-if="contextMenuFile?.is_folder" 
        class="context-menu-item" 
        @click="handleContextMenuAction(() => openFolder(contextMenuFile))"
      >
        <el-icon><FolderOpened /></el-icon>
        <span>打开文件夹</span>
      </div>
      <div class="context-menu-item" @click="handleContextMenuAction(() => copyFileLink(contextMenuFile))">
        <el-icon><Link /></el-icon>
        <span>复制链接</span>
      </div>
      <div class="context-menu-item" @click="handleContextMenuAction(() => showFileInfo(contextMenuFile))">
        <el-icon><InfoFilled /></el-icon>
        <span>文件信息</span>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="!loading && sharedFiles.length === 0" class="empty-state">
      <div class="empty-icon">
        <el-icon>
          <Share />
        </el-icon>
      </div>
      <h3 class="empty-title">暂无共享文件</h3>
      <p class="empty-description">当前没有与您共享的文件或文件夹</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  Document, 
  Folder, 
  Share, 
  Refresh, 
  Download, 
  FolderOpened, 
  User, 
  Clock,
  Lock,
  Picture,
  VideoPlay,
  Headset,
  EditPen,
  Search,
  Link,
  InfoFilled
} from '@element-plus/icons-vue'
import api from '@/utils/api'

const router = useRouter()

// 响应式数据
const sharedFiles = ref([])
const loading = ref(false)
const searchKeyword = ref('')
const shareLevel = ref('')
const fileType = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 右键菜单相关数据
const contextMenuVisible = ref(false)
const contextMenuPosition = ref({ x: 0, y: 0 })
const contextMenuFile = ref(null)

// 加载共享文件
const loadSharedFiles = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      page_size: pageSize.value
    }
    
    if (searchKeyword.value.trim()) {
      params.search = searchKeyword.value.trim()
    }
    
    if (shareLevel.value) {
      params.share_level = shareLevel.value
    }
    
    if (fileType.value) {
      params.type = fileType.value
    }
    
    const response = await api.get('/files/shared', { params })
    sharedFiles.value = response.data.files || []
    total.value = response.data.total || 0
  } catch (error) {
    console.error('加载共享文件失败:', error)
    ElMessage.error('加载共享文件失败')
  } finally {
    loading.value = false
  }
}

// 搜索处理
let searchTimer = null
const handleSearch = () => {
  // 重置页码
  currentPage.value = 1
  
  // 防抖处理
  if (searchTimer) {
    clearTimeout(searchTimer)
  }
  
  searchTimer = setTimeout(() => {
    loadSharedFiles()
  }, 300)
}

// 获取共享级别标签类型
const getShareLevelType = (level) => {
  switch (level) {
    case 'public': return 'success'
    case 'department': return 'warning'
    case 'private': return 'info'
    default: return 'info'
  }
}

// 获取共享级别文本
const getShareLevelText = (level) => {
  switch (level) {
    case 'public': return '公开'
    case 'department': return '部门'
    case 'private': return '私有'
    default: return '未知'
  }
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 处理行点击
const handleRowClick = (row) => {
  if (row.is_folder) {
    openFolder(row)
  }
}

// 打开文件夹
const openFolder = (folder) => {
  // 跳转到文件管理页面，并定位到该文件夹
  router.push({
    path: '/files',
    query: { folder_id: folder.id }
  })
}

// 获取文件图标
const getFileIcon = (file) => {
  if (file.is_folder) {
    return Folder
  }
  
  const extension = file.name.split('.').pop()?.toLowerCase()
  
  if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(extension)) {
    return Picture
  } else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(extension)) {
    return VideoPlay
  } else if (['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(extension)) {
    return Headset
  } else if (['doc', 'docx', 'pdf', 'txt', 'rtf'].includes(extension)) {
    return EditPen
  }
  
  return Document
}

// 获取文件图标类名
const getFileIconClass = (file) => {
  if (file.is_folder) {
    return 'file-icon folder-icon'
  }
  
  const extension = file.name.split('.').pop()?.toLowerCase()
  
  if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(extension)) {
    return 'file-icon image-icon'
  } else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(extension)) {
    return 'file-icon video-icon'
  } else if (['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(extension)) {
    return 'file-icon audio-icon'
  } else if (['doc', 'docx', 'pdf', 'txt', 'rtf'].includes(extension)) {
    return 'file-icon document-icon'
  } else if (['js', 'ts', 'vue', 'html', 'css', 'py', 'java', 'cpp'].includes(extension)) {
    return 'file-icon code-icon'
  }
  
  return 'file-icon'
}

// 获取共享图标
const getShareIcon = (shareLevel) => {
  switch (shareLevel) {
    case 'public': return Share
    case 'department': return User
    case 'private': return Lock
    default: return Lock
  }
}

// 下载文件
const downloadFile = async (file) => {
  try {
    const response = await api.get(`/files/${file.id}/download`, {
      responseType: 'blob'
    })
    
    // 创建下载链接
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', file.name)
    document.body.appendChild(link)
    link.click()
    link.remove()
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('文件下载成功')
  } catch (error) {
    console.error('下载文件失败:', error)
    ElMessage.error('下载文件失败')
  }
}

// 处理表格行右键点击
const handleRowRightClick = (row, column, event) => {
  event.preventDefault()
  contextMenuFile.value = row
  contextMenuPosition.value = {
    x: event.clientX,
    y: event.clientY
  }
  contextMenuVisible.value = true
  
  // 添加全局点击监听器来隐藏菜单
  const hideMenu = () => {
    contextMenuVisible.value = false
    document.removeEventListener('click', hideMenu)
  }
  document.addEventListener('click', hideMenu)
}

// 处理右键菜单项点击
const handleContextMenuAction = (action) => {
  contextMenuVisible.value = false
  action()
}

// 复制文件链接
const copyFileLink = async (file) => {
  try {
    const link = `${window.location.origin}/api/files/${file.id}/download`
    await navigator.clipboard.writeText(link)
    ElMessage.success('链接已复制到剪贴板')
  } catch (error) {
    console.error('复制链接失败:', error)
    ElMessage.error('复制链接失败')
  }
}

// 显示文件信息
const showFileInfo = (file) => {
  const info = [
    `文件名: ${file.name}`,
    `类型: ${file.is_folder ? '文件夹' : '文件'}`,
    `大小: ${file.is_folder ? '-' : formatFileSize(file.size)}`,
    `共享级别: ${getShareLevelText(file.share_level)}`,
    `所有者: ${file.owner_name || '未知'}`,
    `修改时间: ${formatDate(file.updated_at)}`
  ]
  
  if (file.description) {
    info.push(`描述: ${file.description}`)
  }
  
  ElMessage({
    message: info.join('\n'),
    type: 'info',
    duration: 5000,
    showClose: true
  })
}

// 组件挂载时加载数据
onMounted(() => {
  loadSharedFiles()
})
</script>

<style scoped>
.shared-files {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

/* 页面头部样式 */
.page-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-info));
  color: white;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.header-text {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 32px;
  opacity: 0.9;
}

.page-description {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
  font-weight: 400;
}

.header-stats {
  display: flex;
  gap: 20px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 120px;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 4px;
  color: white;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
  font-weight: 500;
}

/* 工具栏样式 */
.toolbar-container {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 16px 24px;
  backdrop-filter: blur(10px);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
}

.toolbar-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.search-filter-section {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.search-box {
  flex: 1;
  max-width: 300px;
}

.search-input {
  width: 100%;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: var(--border-radius-md);
  transition: all var(--transition-base);
  background: var(--bg-primary);
}

.search-input :deep(.el-input__wrapper:hover) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}

.search-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.filters {
  display: flex;
  gap: 16px;
  align-items: center;
}

.filter-select {
  width: 160px;
}

.filter-select :deep(.el-input__wrapper) {
  border-radius: var(--border-radius-md);
  transition: all var(--transition-base);
}

.filter-select :deep(.el-input__wrapper:hover) {
  border-color: var(--color-primary);
}

.toolbar-right {
  display: flex;
  gap: 12px;
}

.refresh-btn {
  height: 36px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  transition: all var(--transition-base);
}

.refresh-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* 文件列表样式 */
.file-list-container {
  flex: 1;
  padding: 24px;
  overflow: hidden;
}

.file-table-wrapper {
  height: 100%;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.shared-files-table {
  height: 100%;
}

.shared-files-table :deep(.el-table__header) {
  background: var(--bg-tertiary);
}

.shared-files-table :deep(.el-table__row) {
  transition: all var(--transition-base);
  cursor: pointer;
}

.shared-files-table :deep(.el-table__row:hover) {
  background: var(--bg-tertiary);
  transform: scale(1.001);
}

.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.file-icon {
  font-size: 20px;
  transition: all var(--transition-base);
}

.folder-icon {
  color: var(--color-warning);
}

.image-icon {
  color: var(--color-success);
}

.video-icon {
  color: var(--color-danger);
}

.audio-icon {
  color: var(--color-info);
}

.document-icon {
  color: var(--color-primary);
}

.code-icon {
  color: #8b5cf6;
}

.file-icon {
  color: var(--text-secondary);
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
  display: block;
}

.file-description-inline {
  font-size: 12px;
  color: var(--text-secondary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-level-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--border-radius-md);
  font-weight: 500;
}

.tag-icon {
  font-size: 14px;
}

.owner-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.owner-icon {
  font-size: 16px;
  color: var(--color-primary);
}

.file-size {
  font-weight: 500;
  color: var(--text-secondary);
}

.file-size-empty {
  color: var(--text-tertiary);
}

.file-date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
}

.date-icon {
  font-size: 14px;
  opacity: 0.7;
}

.action-buttons-cell {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-btn-small {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.action-btn-small:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-sm);
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
  margin: 24px;
  box-shadow: var(--shadow-sm);
}

.empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-info));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: pulse 2s infinite;
}

.empty-icon .el-icon {
  font-size: 36px;
  color: white;
}

.empty-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.empty-description {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(var(--color-primary-rgb), 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0);
  }
}

/* 分页样式 */
.pagination-container {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 16px 24px;
  display: flex;
  justify-content: center;
}

.pagination-container :deep(.el-pagination) {
  gap: 8px;
}

.pagination-container :deep(.el-pager li) {
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-base);
}

.pagination-container :deep(.el-pager li:hover) {
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .toolbar {
    flex-direction: column;
    gap: 16px;
  }
  
  .toolbar-left,
  .toolbar-right {
    width: 100%;
    justify-content: center;
  }
  
  .search-filter-section {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  
  .search-box {
    max-width: 100%;
    width: 100%;
  }
  
  .filters {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  
  .filter-select {
    width: 140px;
  }
  
  .file-list-container {
    padding: 16px;
  }
  
  .toolbar-container {
    padding: 12px 16px;
  }
  
  .page-header {
    padding: 24px 16px;
  }
  
  .pagination-container {
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 24px;
  }
  
  .stat-card {
    min-width: 100px;
    padding: 16px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .search-filter-section {
    gap: 8px;
  }
  
  .filters {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  
  .filter-select {
    width: 100%;
  }
  
  .shared-files-table :deep(.el-table__cell) {
    padding: 8px 4px;
  }
  
  .empty-state {
    margin: 16px;
    padding: 60px 16px;
  }
  
  .empty-icon {
    width: 60px;
    height: 60px;
  }
  
  .empty-icon .el-icon {
    font-size: 28px;
  }
  
  .empty-title {
    font-size: 20px;
  }
  
  .empty-description {
    font-size: 14px;
  }
}

/* 动画效果 */
.shared-files-table :deep(.el-table__row) {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-card {
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 右键菜单样式 */
.context-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  min-width: 160px;
  backdrop-filter: blur(8px);
  animation: contextMenuShow 0.15s ease-out;
}

@keyframes contextMenuShow {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.2s ease;
  user-select: none;
}

.context-menu-item:hover {
  background: var(--bg-secondary);
  color: var(--color-primary);
}

.context-menu-item .el-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* 右键菜单响应式设计 */
@media (max-width: 768px) {
  .context-menu {
    min-width: 140px;
  }
  
  .context-menu-item {
    padding: 12px 16px;
    font-size: 16px;
  }
  
  .context-menu-item .el-icon {
    font-size: 18px;
  }
}
</style>